<template>
  <div class="box">
    <!-- 费用 -->
    <el-form ref="formRef" label-width="150px" :model="form" :rules="rules">
      <el-row justify="center" class="title">
        <el-col class="center" :span="8">费用名称</el-col>
        <el-col class="center" :span="8">金额（元）</el-col>
        <el-col class="center" :span="8"></el-col>
        <!-- <el-col class="center" :span="8">操作</el-col> -->
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <el-input
            style="width: 80%"
            v-model="form.compatibleFeeName"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.compatibleFee"></el-input>
        </el-col>
        <el-col :span="8"> </el-col>
        <!-- <el-col class="center button" :span="8"
          ><el-button type="text" @click="submitForm" text>确定</el-button>
        </el-col> -->
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.depositFeeName"></el-input>
        </el-col>
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.depositFee"></el-input>
        </el-col>
        <el-col :span="8"></el-col>
        <!-- <el-col class="center button" :span="8">
          <el-button type="text" @click="submitForm" text
            >确定</el-button
          ></el-col
        > -->
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <el-input
            style="width: 80%"
            v-model="form.insuranceFeeName"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.insuranceFee"></el-input>
        </el-col>
        <el-col :span="8"> </el-col>
        <!-- <el-col class="center button" :span="8">
          <el-button type="text" @click="submitForm" text>确定</el-button>
        </el-col> -->
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.otherFeeName"></el-input>
        </el-col>
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.otherFee"></el-input>
        </el-col>
        <el-col :span="8">
          <el-form-item label="是否自备" style="margin-top: 15px">
            <el-radio-group v-model="form.allowBringOwn">
              <el-radio label="0">否</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <!-- <el-col class="center button" :span="8">
          <el-button type="text" @click="submitForm" text>确定</el-button>
        </el-col> -->
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <el-input
            style="width: 80%"
            v-model="form.registrationFeeName"
          ></el-input>
        </el-col>
        <el-col :span="8">
          <el-input
            style="width: 80%"
            v-model="form.registrationFee"
          ></el-input>
        </el-col>
        <el-col :span="8"
          >兼项
          <el-input
            type="number"
            style="width: 80%"
            v-model="form.compatibleCount"
          ></el-input
          >个
        </el-col>
        <!-- <el-col class="center button" :span="8"
          ><el-button type="text" @click="submitForm" text>确定</el-button>
        </el-col> -->
      </el-row>
      <el-row class="row">
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.teamFeeName"></el-input>
        </el-col>
        <el-col :span="8">
          <el-input style="width: 80%" v-model="form.teamFee"></el-input>
        </el-col>
        <el-col :span="8"> </el-col>
        <!-- <el-col class="center button" :span="8">
          <el-button type="text" @click="submitForm" text>确定</el-button>
        </el-col> -->
      </el-row>
      <br />
      <br />
      <el-row justify="center" class="ccc">
        <el-button type="primary" @click="submitForm">应用</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { useRoute } from "vue-router";
import { getCurrentInstance } from "vue";
import { getInsuranceList, updateCost, addCost } from "@/api/match/league.js";
const { proxy } = getCurrentInstance();
const route = useRoute();
const id = ref(route.query.id);
const data = reactive({
  form: {
    allowBringOwn: "0",
  },
});
const { form } = toRefs(data);

initData();
async function initData() {
  form.value.cptId = id.value;
  let res = await getInsuranceList(form.value);
  form.value = res.data[0];
  form.value.isPlatformInsureFlag = form.value.isPlatformInsureFlag;
}

async function submitForm() {
  if (form.value.id) {
    form.value.cptId = id.value;
    let res = await updateCost(form.value);
    if (res.code === 200) {
      proxy.$modal.msgSuccess("修改成功");
    } else {
      proxy.$modal.msgError("操作失败");
    }
  } else {
    form.value.cptId = id.value;
    let res = await addCost(form.value);
    if (res.code === 200) {
      proxy.$modal.msgSuccess("添加成功");
    } else {
      proxy.$modal.msgError("操作失败");
    }
  }

  initData();
}
</script>

<style scope>
* {
  margin: 0;
  padding: 0;
}
.box {
  padding: 30px;
}
.title {
  background-color: #f8f8f9;
  font-weight: 400;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
}

.center {
  text-align: center;
}
.button {
  font-size: 20px;
  font-weight: 500;
}

.row {
  height: 60px;
  line-height: 60px;
}
.el-col-6 {
  border: 1px solid #eceef5;
  text-align: center;
}
.el-row {
  border: 1px solid #eceef5;
}

.ccc {
  border: 0 !important;
}
</style>
